<template>
    <van-button class="follow-btn" type="info" color="#3296fa" size="small" icon="plus" v-if="!isFollowed"
        @click="onFollow" :loading="followLoading" round>关注
    </van-button>
    <van-button class="follow-btn" size="small" v-else @click="onFollow" :loading="followLoading" round>
        已关注
    </van-button>
</template>

<script>
import { addFollow, deleteFollow } from '../api/user'

export default {
    name: 'FollowUser',
    model: {
        prop: 'isFollowed',
        event: 'update_isFollowed'
    },
    props: {
        isFollowed: {
            type: Boolean,
            required: true
        },
        userId: {
            type: [Number, String, Object],
            required: true
        }
    },
    data() {
        return {
            followLoading: false
        }
    },
    methods: {
        async onFollow() {
            this.followLoading = true
            try {
                if (this.isFollowed) {
                    const { data } = await deleteFollow(this.userId)
                    console.log(data);
                } else {
                    const { data } = await addFollow(this.userId)
                    console.log(data);
                }
                // this.$emit('update_isFollowed', !this.isFollowed)
                this.$emit('update_isFollowed', !this.isFollowed)
            } catch (err) {
                if (err.response && err.response.status === 400) {
                    this.$toast('你不能关注你自己')
                }
            }
            this.followLoading = false
        }
    }
}
</script>

<style>
</style>